<template>
  <div class="row">
    新闻内容
    <p :style="{opacity}">闪来闪去</p>
    注册：
    <br>用户名： <input type="text"><br>
    密码 :<input type="text"><br>
  </div>
</template>

<script>
export default {
  name: "News",
  data(){
    return{
      opacity:1,
      value:0.01
    }
  },
  //写个钩子观察一下销毁
  destroyed() {
    console.log('NEWS控件被销毁了')
  },
  //由于这个控件在路由中没有销毁 ，所以除非父控件销毁，不然这个定时器是关不掉的。
  mounted() {
    // this.timer = setInterval(()=>{
    //   console.log('定时器运行中')
    //   this.opacity -= this.value
    //   if(this.opacity <= 0 || this.opacity >=1)this.value *= -1
    // },16)
  },beforeDestroy() {
    // console.log('定时器结束 ')
    // clearInterval(this.timer)
  },
  //在上面的情况中，我们需要使用激活的生命周期钩子
  activated() {
    this.timer = setInterval(()=>{
      console.log('定时器运行中')
      this.opacity -= this.value
      if(this.opacity <= 0 || this.opacity >=1)this.value *= -1
    },16)
  },
  //失活
  deactivated() {
    console.log('定时器结束 ')
    clearInterval(this.timer)
  }
}
</script>

<style scoped>

</style>
